<!doctype html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <link rel="stylesheet" media="all" type="text/css" href="style/style-demo.css">

    <script src="script/jquery-1.11.1.js"></script>
    <script src="script/jquery.easing-1.3.js"></script>
    <script src="script/jquery.mousewheel-3.1.12.js"></script>
    <script src="script/jquery.jcarousellite.js"></script>
</head>
<body>

<div id="jcl-demo">

    <!-- Demo 10 -->
    <h4 id="demo10">Callbacks too!</h4><hr>

    <p>
        Don't call us, we'll call you. We'll call you once before the animation starts,
        and once after the animation ends. Each time, a jquery object that selects all the
        visible items in the carousel will be the argument passed.
    </p>

    <div class="custom-container callback">
        <a href="#" class="prev">&lsaquo;</a>
        <div class="carousel">
            <ul>
                <li><img src="image/1.jpg"></li>
                <li><img src="image/2.jpg"></li>
                <li><img src="image/3.jpg"></li>
                <li><img src="image/4.jpg"></li>
                <li><img src="image/5.jpg"></li>
                <li><img src="image/6.jpg"></li>
                <li><img src="image/7.jpg"></li>
                <li><img src="image/8.jpg"></li>
                <li><img src="image/9.jpg"></li>
                <li><img src="image/10.jpg"></li>
                <li><img src="image/11.jpg"></li>
            </ul>
        </div>
        <a href="#" class="next">&rsaquo;</a>
        <div class="clear"></div>
    </div>

<pre class="prettyprint">
$(".callback .carousel").jCarouselLite({
    btnNext: ".callback .next",
    btnPrev: ".callback .prev",
    beforeStart: function(a) {
        alert("Before animation starts:" + a);
    },
    afterEnd: function(a) {
        alert("After animation ends:" + a);
    }
});
</pre>

    <script type="text/javascript">
        $(function() {
            $(".callback .carousel").jCarouselLite({
                btnNext: ".callback .next",
                btnPrev: ".callback .prev",
                beforeStart: function (a) {
                    alert("Before animation starts:" + a);
                },
                afterEnd: function (a) {
                    alert("After animation ends:" + a);
                }
            });
        });
    </script>

</div>
</body>
</html>